<template>
	<view>
		<view class="wanl-share">
			<view class="wanl-poster__poster" v-if="posterShow">
				<wanl-poster
					ref="wanlPoster"
					:img="VIPImg || image"
					:title="shareTitle"
					:price="price"
					:marketPrice="marketPrice"
					:page="page"
					:scene="scene"
					@success="posterSuccess"
					@close="closeShare"
				/>
			</view>
			<view class="wanl-share__share">
				<view class="head">
					<view class="content">
						<view class="text-lg">分享到</view>
					</view>
				</view>
				<scroll-view class="scroll-x solid-bottom" scroll-x="true" show-scrollbar="false" :scroll-left="scrollAnimation" scroll-with-animation>
					<!-- #ifdef MP -->
					<view class="scroll-item">
						<button open-type="share">
							<view class="icons bg-green"><text class="wlIcon-31fenxiang"></text></view>
							<view class="project text-sm"><text>分享</text></view>
						</button>
					</view>
					<!-- #endif -->
					<view class="scroll-item" v-for="(value, index) in providerList" :key="index" v-if="value" @tap="share(value)">
						<view class="icons" :class="value.background"><text :class="value.icon"></text></view>
						<view class="project text-sm">
							<text>{{ value.name }}</text>
						</view>
					</view>
				</scroll-view>
				<view class="footer" @tap="closeShare"><text>取消</text></view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * WanlShare 分享
 * @description 分享组件 深圳前海万联科技有限公司 https://www.wanlshop.com（除万联官方内嵌系统，未经授权严禁使用）
 * @著作权：WanlShop 登记号：2020SR0255711 版本：V1.0.0
 * @property {Number} scrollAnimation 滚动位置
 * @property {Number} shareType 分享类型 0.图文 1.纯文字 2.纯图片 5.小程序
 * @property {String} shareTitle 分享标题
 * @property {String} shareText 分享详情
 * @property {String} image 分享图片 如果是图文分享，且是ios平台，20kb
 * @property {String} page 分享链接
 * @event {Function} change 关闭弹窗
 */
import { mapState } from 'vuex';
export default {
	name: 'WanlShare',
	props: {
		VImg: {
			type: String,
			default: ''
		},
		scrollAnimation: {
			type: Number,
			default: 300
		},
		shareType: {
			type: Number,
			default: 0
		},
		modalName: {
			type: String,
			default: null
		},
		shareTitle: {
			type: String,
			default: ''
		},
		shareText: {
			type: String,
			default: ''
		},
		image: {
			type: String,
			default: ''
		},
		price: {
			type: String,
			default: ''
		},
		marketPrice: {
			type: String,
			default: ''
		},
		page: {
			type: String,
			default: ''
		},
		scene: {
			type: Object,
			default() {
				return {};
			}
		},
		isReport: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			VIPImg: '',
			providerList: [],
			providerListBak: [],
			posterShow: false,
			posterFilePath: ''
		};
	},
	computed: {
		...mapState(['common'])
	},
	created() {
		let user = uni.getStorageSync('wanlshop:user');
		if (user.isLogin) {
			this.scene.u = user.id;
		}
		uni.getProvider({
			service: 'share',
			success: (e) => {
				let data = [];
				// #ifdef APP-PLUS
				for (let i = 0; i < e.provider.length; i++) {
					switch (e.provider[i]) {
						case 'weixin':
							data.push(
								{
									name: '微信好友',
									id: 'weixin',
									icon: 'wlIcon-WeChat',
									background: 'bg-green',
									sort: 0
								},
								{
									name: '微信朋友圈',
									id: 'weixin',
									icon: 'wlIcon-pengyouquan',
									background: 'bg-green',
									type: 'WXSenceTimeline',
									sort: 1
								}
							);
							break;
						case 'sinaweibo':
							data.push({
								name: '新浪微博',
								id: 'sinaweibo',
								icon: 'wlIcon-WeiBo',
								background: 'red',
								sort: 2
							});
							break;
						case 'qq':
							data.push({
								name: 'QQ',
								id: 'qq',
								icon: 'wlIcon-QQ',
								background: 'blue',
								sort: 3
							});
							break;
						default:
							break;
					}
				}
				// #endif
				console.log(1111, this.VImg);
				this.VImg &&
					data.push({
						name: 'VIP海报',
						id: 'poster_VIP',
						icon: 'wlIcon-classify',
						background: 'gray',
						sort: 10
					});
				data.push(
					{
						name: '生成海报',
						id: 'poster',
						icon: 'wlIcon-classify',
						background: 'gray',
						sort: 4
					},
					{
						name: '链接',
						id: 'link',
						icon: 'wlIcon-lianjie',
						background: 'gray',
						sort: 5
					}
				);
				if (this.isReport) {
					data.push({
						name: '举报',
						id: 'report',
						icon: 'wlIcon-jubao',
						background: 'gray',
						sort: 6
					});
				}
				this.providerList = data.sort((x, y) => {
					return x.sort - y.sort;
				});
			},
			fail: (e) => {
				uni.showModal({
					content: '获取分享通道失败',
					showCancel: false
				});
			}
		});
	},
	methods: {
		async share(e) {
			let url = this.common.appConfig.domain + this.page + '?' + this.$wanlshop.parseParams(JSON.parse(JSON.stringify(this.scene).replace('"gr"', '"groups_id"')));
			if (e.id == 'poster') {
				console.log('poster', this.VImg);
				this.VIPImg = '';
				this.openPoster();
			} else if (e.id == 'poster_VIP') {
				console.log('poster_VIP', this.VImg);
				this.VIPImg = this.VImg;
				this.openPoster('VIP');
			} else if (e.id == 'close') {
				this.closePoster();
			} else if (e.id == 'save') {
				this.toSave();
			} else if (e.id == 'link') {
				this.$wanlshop.copy(url);
			} else if (e.id == 'report') {
				this.closePoster();
				this.complaint();
			} else {
				if (!this.shareTitle && (this.shareType === 1 || this.shareType === 0)) {
					uni.showModal({
						content: '分享内容不能为空',
						showCancel: false
					});
					return;
				}

				if (!this.image && (this.shareType === 2 || this.shareType === 0)) {
					uni.showModal({
						content: '分享图片不能为空',
						showCancel: false
					});
					return;
				}

				// 开始分享
				let shareOPtions = {
					provider: e.id,
					scene: e.type && e.type === 'WXSenceTimeline' ? 'WXSenceTimeline' : 'WXSceneSession', //WXSceneSession”分享到聊天界面，“WXSenceTimeline”分享到朋友圈，“WXSceneFavorite”分享到微信收藏
					type: this.shareType,
					success: (e) => {
						uni.showModal({
							content: '已分享',
							showCancel: false
						});
					},
					fail: (e) => {
						uni.showModal({
							content: e.errMsg,
							showCancel: false
						});
					}
				};

				switch (this.shareType) {
					case 0:
						shareOPtions.summary = this.shareText ? this.shareText : this.common.appConfig.poster_details;
						shareOPtions.imageUrl = this.$wanlshop.oss(this.image, 50, 50);
						shareOPtions.title = this.shareTitle;
						shareOPtions.href = url;
						break;
					case 1:
						shareOPtions.summary = this.shareText ? this.shareText : this.common.appConfig.poster_details;
						break;
					case 2:
						shareOPtions.imageUrl = this.$wanlshop.oss(this.image, 50, 50);
						break;
					case 5:
						var pages = getCurrentPages();
						var page = pages[pages.length - 1].route;
						shareOPtions.imageUrl = this.image ? this.$wanlshop.oss(this.image, 50, 50) : this.$wanlshop.oss(this.common.appConfig.logo, 50, 50);
						shareOPtions.title = this.shareTitle;
						shareOPtions.miniProgram = {
							id: this.common.appConfig.mp_weixin_id,
							path: page, //微信小程序ID
							webUrl: url,
							type: 0
						};
						break;
					default:
						break;
				}
				// if(shareOPtions.type === 0 && plus.os.name === 'iOS'){//如果是图文分享，且是ios平台，则压缩图片
				// 	shareOPtions.imageUrl = await this.compress();
				// }
				if (shareOPtions.type === 1 && shareOPtions.provider === 'qq') {
					//如果是分享文字到qq，则必须加上href和title
					shareOPtions.href = url;
					shareOPtions.title = this.shareTitle;
				}
				uni.share(shareOPtions);
			}
			if (!this.posterShow) {
				this.closeShare();
			}
		},
		// 举报商品
		complaint() {
			this.$emit('change', 'complaint');
		},
		// 关闭模态框
		closeShare() {
			this.closePoster();
			this.$emit('change');
		},
		closePoster() {
			if (this.posterShow) {
				this.providerList = JSON.parse(JSON.stringify(this.providerListBak));
			}
			this.posterShow = false;
		},
		openPoster() {
			// 深度复制
			this.providerListBak = JSON.parse(JSON.stringify(this.providerList));
			this.posterShow = true;
		},
		// 生成海报成功
		posterSuccess(e) {
			this.posterFilePath = e.tempFilePath;
			for (var i = 0; i < this.providerList.length; i++) {
				if (this.providerList[i].id == 'poster') {
					this.providerList[i] = {
						name: '保存海报',
						id: 'save',
						icon: 'wlIcon-xiazai',
						background: 'bg-orange',
						sort: 6
					};
				}
			}
			this.providerList.push({
				name: '关闭海报',
				id: 'close',
				icon: 'wlIcon-31guanbi',
				background: 'gray',
				sort: 6
			});
		},
		// 手动保存
		toSave(url) {
			// #ifdef H5
			this.$wanlshop.msg('暂不支持H5保存，请长按图片保存');
			// #endif
			//#ifndef H5
			uni.getImageInfo({
				src: this.posterFilePath,
				success: (image) => {
					uni.saveImageToPhotosAlbum({
						filePath: image.path,
						success: () => {
							uni.showToast({
								title: '海报已保存相册',
								icon: 'success',
								duration: 2000
							});
							this.closeShare();
						}
					});
				}
			});
			//#endif
		}
	}
};
</script>
<style lang="scss" scoped>
.wanl-share {
	// 海报
	&__poster {
	}
	/* 分享 */
	&__share {
		background-color: #ffffff;
		border-radius: 11px 11px 0 0;
		min-height: 50rpx;
		padding-bottom: 0px;
		padding-bottom: env(safe-area-inset-bottom);
		.head {
			padding: 25rpx 25rpx 10rpx 25rpx;
			.content {
				justify-content: left;
				margin-left: 16rpx;
			}
		}
		.scroll-x {
			white-space: nowrap;
			width: 100%;
			padding: 24rpx 0;
			text-align: left;
			height: 242rpx;
			.scroll-item {
				display: inline-block;
				font-size: 36rpx;
				margin-left: 36rpx;
				text-align: center;
				&:last-child {
					margin-right: 36rpx;
				}
				.icons {
					width: 100rpx;
					height: 100rpx;
					line-height: 100rpx;
					border-radius: 9999rpx;
					margin: 0 auto;
					font-size: 40rpx;
					display: block;
					&.gray {
						color: #606060;
						background-color: #f5f5f5;
					}
					&.red {
						color: #ffffff;
						background-color: #e6162c;
					}
					&.blue {
						color: #ffffff;
						background-color: #3e92e8;
					}
				}
				button {
					line-height: 1;
					background-color: rgba(0, 0, 0, 0);
					border: 0;
					padding: 0;
					&:after {
						border: 0;
					}
				}
				.project {
					margin-top: 25rpx;
				}
			}
		}
		.footer {
			height: 90rpx;
			line-height: 90rpx;
			font-size: 30rpx;
		}
	}
}
</style>
